<template>
  <div id="concourselist"> 


          <el-table :data="datalist" style="width: 100%" :height="dtheight" :header-cell-style="{background:'#4F81BC',color:'white'}">
                
                <el-table-column label="序号"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.sort }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="内容标题"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span v-html='scope.row.title'  class="fwb_wj"></span>
                    </template>
                </el-table-column>
                <el-table-column label="内容"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span v-html='scope.row.content'  class="fwb_wj"></span>
                    </template>
                </el-table-column>

                <el-table-column label="操作"  align='center' >                   
                    <template slot-scope="scope">     
                         <el-button size="mini"  type="primary"  class="button_class1" plain  @click="xg_but(scope.row)">修改</el-button>               
                         <el-button size="mini"  type="primary" class="button_class2" plain  @click="delect_but(scope.row)">删除</el-button> 
                         <el-button size="mini"  type="primary" class="button_class1" plain  @click="px_but(scope.row)">排序</el-button> 
                    </template>
                </el-table-column>

  
            </el-table>  

          

           <el-dialog title="排序" :visible.sync="px_mtk"  width="400px" >
                <el-form ref="form" :model="pxlist"  label-width="50px" style="width:100%;">

                    <el-form-item label="排序">
                       <el-input    v-model="pxlist.index" placeholder="中文标题"></el-input>
                   </el-form-item>
                  </el-form>
                <div style="text-align: center;width:80%;margin:auto;">
                        <el-button type="primary" style="width:80%;" class="custom_color_button" @click="px_but_qr">确认</el-button>
                </div>

            </el-dialog>


        <el-dialog title="添加信息" :visible.sync="xg_infor_mtk"  width="800px" >
          <el-form ref="form" :model="formlist"  label-width="100px" style="width:100%;">
 
              <el-form-item label="内容标题">
                    <el-input    v-model="formlist.title" placeholder="中文标题"></el-input>
              </el-form-item> 

             <!-- 富文本选取图片 -->
                <el-form-item label="详情" style="">
                    <div style="">
                        <quill-editor class="editor"
                            v-model="formlist.content" 
                            ref="myQuillEditor" 
                            :options="editorOption" 
                            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                            @change="onEditorChange($event)" style="height:300px;margin-bottom:100px;">
                        </quill-editor>
                    </div>
                </el-form-item>
            <!-- 富文本选取图片 -->
            <el-form-item label="" v-show="false" >  
                <el-upload                                                
                    action="uploadUrl"  
                    :show-file-list="false"   
                    :before-upload="beforeupload"
                    :http-request="ImgUploadSectionFile">
                        <el-button slot="trigger" size="small" type="primary" id="selectImg">选取文件</el-button>
                </el-upload>
            </el-form-item>


            

         </el-form>
          <div style="text-align: center;width:80%;margin:auto;">
                  <el-button type="primary" style="width:80%;" class="custom_color_button" @click="xg_infor_but_qr">确认</el-button>
          </div>

   </el-dialog>  



   </div>
</template>

<script>
import toolbarOptions from '@/assets/js/quillConfig.js'
export default {
   name: 'concourselist',
   props:{
      datalist:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        xg_infor_mtk:false,
        formlist:{
            content:'',
            upfile:'',
            title:''
        },
        px_mtk:false,
        pxlist:{
          index:''
        },
        editorOption: {//富文本
          modules: {
            toolbar: {
              container: toolbarOptions,  // 工具栏
              handlers: {
                'image': function (value) {
                  if (value) {
                    // alert('自定义图片')
                    document.getElementById("selectImg").click();    //调用选择图片
                    
                  } else {
                   // this.quill.format('image', false);
                  }
                }
              }
            }
           }       
        },
        my_id:'',
    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 253
      
  },
  mounted (){
    
  },
  methods: {

  xg_but(row){
       this.my_id = row.id
       this.formlist.content = row.content
       this.formlist.title = row.title
       this.xg_infor_mtk = true
  }, 
  xg_infor_but_qr(){

           this.post("/study_guide/updateContent", {
                   id:this.my_id,
                   content:this.formlist.content,
                    title:this.formlist.title
                }).then(res => {

                    if(res.error_code == 0){
                        this.open1(res.result,'success')  //提示框
                        this.xg_infor_mtk = false
                        this.$emit('up_list_fun')

                    }else {
                     this.open1(res.message,'warning')
                    }
               })

          console.log(this.formlist)
      },
  delect_but(row){

     this.$confirm('是否删除内容, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
         }).then(() => {
             

              this.post("/study_guide/delContent", {
                    id:row.id,
              }).then(res => {

                      if(res.error_code == 0){
                        this.open1(res.result,'success')  //提示框
                        this.$emit('up_list_fun')
                      }else {
                        this.open1(res.message,'warning')
                      }

            })

        }).catch(() => {
                 
        });
  
   },
   px_but(row){
         this.pxlist.index = row.sort
        this.my_id = row.id
        this.px_mtk = true
   },
   px_but_qr(){
        this.post("/study_guide/sort", {
                    id:this.my_id,
                    num:this.pxlist.index
              }).then(res => {

                      if(res.error_code == 0){
                        this.open1(res.result,'success')  //提示框
                        this.$emit('up_list_fun')
                         this.px_mtk = false
                      }else {
                        this.open1(res.message,'warning')
                      }

            })
   },
    ImgUploadSectionFile(param){//图片上传    
    },
    beforeupload(file){   //重新写入上穿 需要点击确认上传与表单一起提交
           if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误             
              return false
            }     
            
            let that = this
            this.upimgpost("/image/uploadMultiple",file).then(res => {
            this.formlist.upfile = res.result.url  
                console.log(this.formlist.upfile) 
                this.formlist.content = this.formlist.content +'<img src="'+  this.urlimg + this.formlist.upfile +'"/>'
           })

          return false;
      },
        onEditorBlur(){ //富文本
        },
        onEditorFocus(){//富文本获得焦点事件
        },
        onEditorChange(){//富文本内容改变事件
        //console.log(this.xg_school.content)
        },



  }
}
</script>


<style scoped>
.fwb_wj{
   /* display: -webkit-box; */
    /* height: 300px; */
    overflow: hidden;
    white-space:nowrap; 
    text-overflow:ellipsis; 
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fwb_wj>>>img{ 
    width: 30px;
    height:30px;
    display: inline-block;
}
</style>